<template>
  <div class="page-layout">
    <div style="margin-bottom: 12px">
      <el-button type="primary" size="mini" @click="add">新增</el-button>
    </div>
    <el-table size="mini" ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="accountType" label="账户类型" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.accountType == '1' ? "企业" : "个人" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accountName" label="开户名"> </el-table-column>
      <el-table-column prop="areaName" label="地区"> </el-table-column>
      <el-table-column prop="accountNumber" label="账号"> </el-table-column>
      <el-table-column prop="contactPhone" label="联系方式"> </el-table-column>
      <el-table-column prop="bankName" label="开户银行"> </el-table-column>
      <el-table-column prop="bankBranchName" label="分支行名称">
      </el-table-column>
      <el-table-column prop="certificateNumber" label="证件号">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800" v-loading="loading">
      <el-form :model="ruleForm" ref="ruleForm" label-width="110px">
        <el-form-item label="开户名称" prop="accountName" :rules="[{ required: true, message: '请输入开户名称' }]">
          <el-input placeholder="请输入开户名称" v-model="ruleForm.accountName"></el-input>
        </el-form-item>
        <el-form-item label="开户类型" prop="accountType">
          <el-select v-model="ruleForm.accountType" placeholder="请选择开户类型">
            <el-option v-for="item in accountTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区" prop="areaName" :rules="[{ required: true, message: '请选择地区' }]">
          <el-select @change="areaChange" filterable v-model="ruleForm.areaName" placeholder="请选择地区">
            <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区银行" prop="bankName" :rules="[{ required: true, message: '请选择地区银行' }]">
          <el-select v-model="ruleForm.bankName" filterable @change="bankChange" placeholder="请选择地区银行">
            <el-option v-for="item in bankList" :key="item.bankId" :label="item.bankName" :value="item.bankId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分支行名称" prop="bankBranchName" :rules="[{ required: true, message: '请选择分支行' }]">
          <el-select filterable v-model="ruleForm.bankBranchName" placeholder="请选择分支行">
            <el-option v-for="item in bankBranchList" :key="item.bankBranchId" :label="item.bankBranchName" :value="item.bankBranchId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="卡号" prop="accountNumber" :rules="[
        { required: true, message: '请输入卡号' },
        {
          validator: (rule, value, cb) => checkBankNumber(rule, value, cb),
          message: '卡号只能为数字',
        },
      ]">
          <el-input placeholder="请输入卡号" v-model="ruleForm.accountNumber"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactPhone" :rules="[
        { required: true, message: '请输入联系地址' },
        {
          validator: (rule, value, cb) => phoneNumberRight(rule, value, cb),
          message: '请输入正确的手机号码',
        },
      ]">
          <el-input placeholder="请输入联系方式" v-model="ruleForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="certificateNumber" :rules="[
        { required: true, message: '请输入证件号码' },
        // {
        //   validator: (value, rule) => checkDocument(value, rule),
        //   message: '请输入正确的证件号码',
        // },
      ]">
          <el-input placeholder="请输入证件号码" v-model="ruleForm.certificateNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getLabel } from "@/utils/func";
import { AccountTypeList } from "@/utils/options";
const regExp = /^\d+$/;
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
export default {
  computed: {
    bank() {
      const bank = localStorage.getItem("bank");
      if (bank) {
        return JSON.parse(bank);
      }
      return {};
    },
    hasBankId() {
      return !!this.bankAccountId || this.bankAccountId === 0;
    },
  },
  data() {
    return {
      loading: false,
      bankAccountId: "",
      title: "新增银行账户",
      accountTypeList: AccountTypeList,
      areaList: [],
      bankList: [],
      bankBranchList: [],
      ruleForm: {
        accountName: "",
        accountNumber: "",
        accountType: "1",
        areaName: "",
        bankName: "",
        bankBranchName: "",
        contactPhone: "",
        certificateNumber: "",
      },
      dialogVisible: false,
      tableHeight: 0,
      tableData: [],
    };
  },
  methods: {
    add() {
      this.title = "新增银行账户";
      this.dialogVisible = true;
      this.bankAccountId = "";
    },
    edit(row) {
      console.log(row, "row");
      this.title = "编辑银行账户";
      this.dialogVisible = true;
      this.bankAccountId = row.bankAccountId;
      const bankItem = this.bankList.find(
        (item) => item.bankName === row.bankName
      );
      const areaItem = this.areaList.find(
        (item) => item.areaName === row.areaName
      );
      this.ruleForm = {
        accountName: row.accountName,
        accountNumber: row.accountNumber,
        accountType: row.accountType,
        areaName: areaItem ? areaItem.areaId : "",
        bankName: bankItem ? bankItem.bankId : "",
        bankBranchName: row.bankBranchName,
        contactPhone: row.contactPhone,
        certificateNumber: row.certificateNumber,
      };
      if (!this.ruleForm.areaName || !this.ruleForm.bankName) {
        return;
      }
      this.getBankBranchList().then((res) => {
        this.ruleForm.bankBranchName = res.find(
          (item) => item.bankBranchName === row.bankBranchName
        ).bankBranchId;
      });
    },
    del(row) {
      this.$toConfirm("是否确认删除", "warning", "提示")
        .then(() => {
          this.delConfirm(row);
        })
        .catch(() => {
          //
        });
    },
    delConfirm(row) {
      this.$post("/bank/account/remove", {
        bankAccountId: row.bankAccountId,
      }).then(() => {
        this.$message.success("删除成功");
        this.getTableData();
      });
    },
    checkBankNumber(rule, value, cb) {
      if (!regExp.test(value)) {
        cb("卡号只能为数字");
      }
      cb();
    },
    phoneNumberRight(rule, value, cb) {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        cb("请输入正确的联系方式");
      }
      cb();
    },
    checkDocument(value) {
      return reg.test(value);
    },
    getBankList() {
      return this.$get("/bank/account/bank").then((res) => {
        this.bankList = res.data;
      });
    },
    getAreaList() {
      return this.$get("/bank/account/area").then((res) => {
        this.areaList = res.data;
      });
    },
    areaChange() {
      this.getBankBranchList();
      this.ruleForm.bankBranchName = "";
    },
    bankChange() {
      this.getBankBranchList();
      this.ruleForm.bankBranchName = "";
    },
    getBankBranchList() {
      if (!this.ruleForm.areaName || !this.ruleForm.bankName) {
        return;
      }
      const params = {
        areaId: this.ruleForm.areaName,
        bankId: this.ruleForm.bankName,
      };
      return this.$get("/bank/account/bankbranch", params).then((res) => {
        this.bankBranchList = res.data;
        return res.data;
      });
    },
    onSubmit() {
      const {
        accountName,
        accountType,
        areaName,
        bankName,
        bankBranchName,
        accountNumber,
        contactPhone,
        certificateNumber,
      } = this.ruleForm;
      const params = {
        accountName,
        accountType,
        areaName: this.areaList.find((item) => item.areaId === areaName)
          .areaName,
        bankName: this.bankList.find((item) => item.bankId === bankName)
          .bankName,
        bankBranchName: this.bankBranchList.find(
          (item) => item.bankBranchId === bankBranchName
        ).bankBranchName,
        accountNumber,
        contactPhone,
        certificateNumber,
      };
      const url = this.hasBankId ? "/bank/account/update" : "/bank/account/add";
      if (this.hasBankId) {
        params.bankAccountId = this.bankAccountId;
      }
      const message = this.hasBankId ? "编辑成功" : "新增成功";
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$post(url, params)
            .then(() => {
              this.$message.success(message);
              if (this.$route.query.orderNum) {
                this.$router.push({
                  path: "reviewPolicy",
                  query: {
                    orderNum: this.$route.query.orderNum,
                    getReportingCaseDataFromCache: true,
                  },
                });
              }
              this.dialogVisible = false;
              this.getTableData();
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    setTableHeight() {
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        this.tableHeight = bodyHeight - 185 + "px";
      });
    },
    getTableData() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.$get("/bank/account/list", params).then((res) => {
        if (res) {
          this.tableData = res.data;
        } else {
          this.tableData = [];
        }
      });
    },
  },
  mounted() {
    if (this.$route.query.orderNum) {
      this.dialogVisible = true;
    }
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
    this.getTableData();
    if (this.hasBankId) {
      Promise.all([this.getAreaList(), this.getBankList()]).then(() => {
        this.accountName = this.bank.accountName;
        this.accountType = getLabel(AccountTypeList, this.bank.accountType);
        this.areaName = this.bank.areaName;
        this.bankName = this.bank.bankName;
        this.bankBranchName = this.bank.bankBranchName;
        this.accountNumber = this.bank.accountNumber;
        this.contactPhone = this.bank.contactPhone;
        this.certificateNumber = this.bank.certificateNumber;
      });
    } else {
      this.getAreaList();
      this.getBankList();
    }
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>